<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Comments &laquo; Admin</title>
  <link rel="stylesheet" href="/static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="/static/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="/static/assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href="/static/assets/css/admin.css">
  <script src="/static/assets/vendors/nprogress/nprogress.js"></script>
</head>
<body>
  <script>NProgress.start()</script>

  <div class="main">
    <?php include 'inc/navbar.php' ?>
    <div class="container-fluid">
      <div class="page-title">
        <h1>所有评论</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <div class="page-action">
        <!-- show when multiple checked -->
        <div class="btn-batch" style="display: none">
          <button  class="btn btn-info btn-sm">批量批准</button>
          <button  class="btn btn-warning btn-sm">批量拒绝</button>
          <button  class="btn btn-danger btn-sm ">批量删除</button>
        </div>
        <ul class="pagination pagination-sm pull-right"></ul>       
      </div>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th class="text-center" width="40"><input type="checkbox"></th>
            <th>作者</th>
            <th>评论</th>
            <th>评论在</th>
            <th>提交于</th>
            <th>状态</th>
            <th class="text-center" width="150">操作</th>
          </tr>
        </thead>
        <tbody></tbody>      
      </table>
    </div>
  </div>
  <?php $current_page = 'comments'; ?>
  <?php include 'inc/sidebar.php'; ?>
  <script src="/static/assets/vendors/jquery/jquery.js"></script>
  <script src="/static/assets/vendors/bootstrap/js/bootstrap.js">
  </script>
  <script src="/static/assets/vendors/jsrender/jsrender.js"></script>
  <script src="/static/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>
  <script id="comments_list" type="text/x-template">
   {{for comment}}
    <tr class="{{: status == 'rejected' ? 'danger': status == 'held' ?  'warning' : '' }}" data-id="{{:id}}">
      <td class="text-center"><input type="checkbox"></td>
      <td>{{:author}}</td>
      <td>{{:content}}</td>
      <td>《{{:post_title}}》</td>
      <td>{{:created}}</td>
      <td>{{:status}}</td>
      <td class="text-center">
        {{if status == 'held'}}
        <a href="javascript:;" class="btn btn-info btn-xs btn-edit" data-status="approved">批准</a>
         <a href="javascript:;" class="btn  btn-warning btn-xs btn-edit" data-status="rejected">拒绝</a>
         {{/if}}
        <a href="javascript:;" class="btn btn-xs btn-danger btn-delete">删除</a>
      </td>
    </tr>
   {{/for}}
  </script>
  <script>
$(function(){
    var current_page = loadPageData(1);
    function loadPageData(page){
      //发送ajax请求获取所需数据
      $.get('/admin/api/comments.php',{page:page}, function(res) {
      //分页功能
      if (page > res.total_page) {
        loadPageData(res.total_page);
        return false;
      }
      $('.pagination').twbsPagination('destroy');
      $('.pagination').twbsPagination({
        totalPages: res.total_page,
        visiblePages: 5,
        startPage: page,
        first:'首页',
        prev:'&laquo',
        next:'&raquo',
        last:'尾页',
        initiateStartPageClick: false,
        onPageClick: function (e,page) {
            loadPageData(page);               
        }
      })
       //请求响应后自动执行
       //res => [] , [{}]
      var html = $('#comments_list').render({comment:res.comments})
         //渲染完成
        $('tbody').html(html);
        //加载完数据记录当前页码
        current_page = page;
      
        });
    }

    loadPageData(current_page);   

   $('tbody').on('click', '.btn-delete', function() {
     //选择合适的时机
     //获取要删除的数据的ID
     var $tr = $(this).parent().parent();
     var id = $tr.data('id');
     //console.log(id);
     //发送AJAX请求告诉服务端具体要删除哪一条数据
     $.get('/admin/api/comment-delete.php',{id:id}, function(data) {
       if (!data) return;
       //页面重新加载
       loadPageData(current_page);
     });
     
     // 修改评论状态
   $('tbody').on('click', '.btn-edit', function () {
     var id = parseInt($(this).parent().parent().data('id'))
        //console.log(id);
        var status = $(this).data('status')
        $.post('/admin/api/comments-status.php?id=' + id, { status: status }, function (res) {
          if (!res) return;
          loadPageData(current_page);
        })
      })
   });
      

      /*//定义一个数组被选中的
      var allChecked = []
      $tbodyCheckbox.on('change', function() {
        var id = parseInt($(this).parent().parent().data('id'))
        //根据有没有选中这个checkbox决定添加还是移除
        if ($(this).prop('checked')) {
          allChecked.includes(id) || allChecked.push(id)
        }else{
          allChecked.splice(allChecked.indexOf(id),1)
        }
        //根据剩下所选中的checkbox决定是否显示批量删除按钮
     allChecked.length ? $btnAll.fadeIn():$btnAll.fadeOut()
      });*/
      // 批量操作按钮
     var $tbody = $('tbody');
     // 选中项集合
      var checkedItems = []
      var $btnAll = $('.btn-batch')
      $tbody.on('change', 'td > input[type=checkbox]', function () {
        var id = parseInt($(this).parent().parent().data('id'))
        if ($(this).prop('checked')) {
          checkedItems.push(id)
        } else {
          checkedItems.splice(checkedItems.indexOf(id), 1)
        }
        checkedItems.length ? $btnAll.fadeIn() : $btnAll.fadeOut()
      })

          // 全选 / 全不选
      $('th > input[type=checkbox]').on('change', function () {
        var checked = $(this).prop('checked')
        $('td > input[type=checkbox]').prop('checked', checked).trigger('change')
      })

      // 批量操作
      $btnAll
        // 批准
        .on('click', '.btn-info', function () {
          $.post('/admin/api/comments-status.php?id=' + checkedItems.join(','), { status: 'approved' }, function (res) {
            if (!res) return;
          loadPageData(current_page);
          })
        })
        // 拒绝
        .on('click', '.btn-warning', function () {
          $.post('/admin/api/comments-status.php?id=' + checkedItems.join(','), { status: 'rejected' }, function (res) {
            if (!res) return;
          loadPageData(current_page);
          })
        })
        // 删除
        .on('click', '.btn-danger', function () {
          $.get('/admin/api/comment-delete.php', { id: checkedItems.join(',') }, function (res) {
            if (!res) return;
          loadPageData(current_page);
          })
        })
   

})


    
  </script>
  <script>NProgress.done()</script>
</body>
</html>
